<template>
    <div class="login-container ">
        <div class="login-form">
            <h2 class="drag" style="width: 86%;">{{ statu ? '用户注册' : '用户登录' }}</h2>
            <form @submit.prevent="handleLogin">
                <div class="input-group">
                    <label>用户名:</label>
                    <input type="text" v-model="username" required>
                </div>
                <div class="input-group">
                    <label>密码:</label>
                    <input type="password" v-model="password" required>
                </div>
                <div class="input-group" v-if="statu">
                    <label>电话号码:</label>
                    <input type="text" v-model="phone" required>
                </div>
                <div class="input-group" v-if="statu">
                    <label>验证码:</label>
                    <input type="text" v-model="code" required>
                </div>
                <button type="submit">{{ statu ? '注册' : '登录' }}</button>
            </form>
            <a @click="zc">{{ statu ? '已有账户？登录' : '没有账户？注册' }}</a>
        </div>
    </div>
</template>

<script>
import router from '@/router'
export default {
    components: {
    },
    data() {
        return {
            username: '',
            password: '',
            phone: '',
            code: '',
            statu: false
        }
    },
    mounted() {
        this.cshwindow()
    },
    methods: {
        handleLogin(e) {
            // 在此处添加你的登录逻辑
            let size = {
                statu: false
            }
            window.ipcRenderer.send('windowSize', size)
            router.push('/home')
        },
        zc() {
            let size = {
                w: 300,
                h: this.statu ? 300 : 440,
                statu: true
            }
            window.ipcRenderer.send('windowSize', size)
            this.statu = !this.statu
        },
        cshwindow() {
            let size = {
                w: 300,
                h: 300,
                statu: true
            }
            window.ipcRenderer.send('windowSize', size)
        }
    }
}
</script>

<style scoped>
.login-container {
    width: 100%;
    height: 100%;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    overflow: hidden;
}

.login-form {
    width: 100%;
    padding: 20px;
    background-color: white;
    margin-bottom: 10px;
}

h2 {
    text-align: center;
    color: #333;
}

.input-group {
    margin-bottom: 10px;
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

input {
    width: 86%;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

button[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 86%;
}

button:hover {
    background-color: #0056b3;
}

a {
    width: 86%;
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: #007bff;
    text-decoration: none;
}
</style>
